<template>
  <el-card shadow="hover" style="max-width: 900px; margin: 40px auto; border-radius: 16px;">
    <h2>模型库</h2>
    <el-row :gutter="24" style="margin-top: 20px;">
      <el-col :span="8" v-for="model in models" :key="model.name">
        <el-card shadow="hover" style="border-radius: 16px; text-align: center;">
          <el-icon style="font-size: 32px; margin-bottom: 8px;"><Histogram /></el-icon>
          <h3>{{ model.name }}</h3>
          <p style="color: #888; margin-bottom: 16px;">{{ model.desc }}</p>
          <el-button type="primary" icon="el-icon-info-filled">详情</el-button>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { Histogram, InfoFilled } from '@element-plus/icons-vue'
const models = [
  { name: '模型A', desc: '分类模型' },
  { name: '模型B', desc: '回归模型' },
  { name: '模型C', desc: '聚类模型' }
]
</script>
